<template>
    <section class="abc">
        <el-form :inline="true" :model="formSearch" class="form_inline main_center" label-width="120px">
            <el-form-item label="产品名称" size="small">
                <el-input v-model="formSearch.name" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <el-form-item label="产品名称" size="small">
                <el-input v-model="formSearch.name" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="所属品类：" size="small">
                <el-select v-model="formSearch.projectId" placeholder="请选择所属品类">
                    <el-option label="A" value="B"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item size="small">
                <el-button size="small" @click="getlist">查 询</el-button>
                <el-button size="small" @click="openDialog">新 增</el-button>
                <!-- <el-button size="small" @click="realplay">播 放</el-button> -->
            </el-form-item>
        </el-form>
        <!-- <div id="playWind"  style="width: 600px;height: 400px;"></div> -->
        <div class="content">
            <div class="card_table">
                <el-card class="card_box" v-for="(item, index) in formData" :key="index">
                    <div class="top_content">
                        <div style="display: flex;">
                            <el-popover placement="left" trigger="click" class="popover">
                                <img :src="item.photoUrl==''?url:item.photoUrl" width="100%" />
                                <!-- <el-image style="width: 50px; height: 50px;border-radius: 50%;" :src="item.photoUrl==''?url:item.photoUrl"></el-image> -->
                                <img slot="reference" :src="item.photoUrl==''?url:item.photoUrl"
                                    :alt="item.photoUrl==''?url:item.photoUrl" class="popoverimg" />
                            </el-popover>

                            <!-- </el-image> -->
                            <div class="title">
                                <div class="product_name">{{item.name}}</div>
                                <div class="product_id">编号：{{item.id}}</div>
                            </div>
                        </div>
                        <div class="message">
                            <div class="product_num">
                                <p>设备数量</p>
                                <p class="pr_num">120</p>
                            </div>
                            <div>
                                <p>发布状态</p>
                                <div class="pr_state">
                                    <div class="point_green"></div>
                                    <span>已发布</span>
                                </div>
                            </div>
                            <div>
                                <p>产品类型</p>
                                <p class="pr_type">{{item.deviceType}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="button_box">
                        <div class="button_icon">
                            <i class="el-icon-view" @click="godetails(item)"></i>
                        </div>
                        <div class="line"></div>
                        <div class="button_icon">
                            <i class="el-icon-edit" @click="xiugai(item)"></i>
                        </div>
                        <div class="line"></div>
                        <div class="button_icon">
                            <i class="el-icon-download"></i>
                        </div>
                        <div class="line"></div>
                        <div class="button_icon">
                            <i class="el-icon-delete" @click="shanchu(item.id)"></i>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <!-- 3.2 底部分页      -->
        <paging @changePage=handleCurrentPage :get-total='total'></paging>
        <!-- 新增弹窗 -->
        <el-dialog :title="addorupdata==1?'新增':addorupdata==2?'修改':'详情'" :visible.sync="addOrUpDialog"
            @closed='closeadd' :close-on-click-modal="false">
            <div class="cont_box_right">
                <el-form label-position="right" size="small" label-width="130px" :model="formPush" ref='formPush'>
                    <el-form-item label="所属项目：" size="small"
                        :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                        <el-select v-model="xqdatavalue" value-key="id" placeholder="请选择所属项目" @change="projectIdchange">
                            <el-option v-for="item in xqTree" :label="item.name" :value="item" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品唯一标识：" prop="id"
                        :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                        <el-input :disabled="addorupdata==2?true:false" v-model="formPush.id"></el-input>
                    </el-form-item>
                    <el-form-item label="产品名称：" prop="name"
                        :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                        <el-input v-model="formPush.name"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="所属机构：">
                        <el-select v-model="formPush.orgId" placeholder="请选择所属机构">
                            <el-option label="中山大学" value="1"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- <el-form-item label="消息协议：">
                        <el-select v-model="formPush.messageProtocol" placeholder="请选择消息协议">
                            <el-option label="ubicell-default" value="ubicell-default"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="传输协议：" prop="transportProtocol" :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                        <el-select v-model="formPush.transportProtocol" placeholder="请选择传输协议">
                            <el-option label="Modbus" value="Modbus"></el-option>
                            <el-option label="Bacnet" value="Bacnet"></el-option>
                            <el-option label="OPC" value="OPC"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="所属驱动：" size="small"
                        :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                        <el-select v-model="formPush.driverId"  placeholder="请选择所属驱动" @change="">
                            <el-option v-for="item in driverselects" :label="item.name" :value="item.id" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模板：" prop="profileIds">
                        <el-select v-model="formPush.profileIds" multiple placeholder="请选择">
                            <el-option v-for="item in profilelist" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="所属品类：">
                        <el-input v-model="formPush.classifiedName"></el-input>
                    </el-form-item> -->
                    <el-form-item label="设备类型：">
                        <el-radio-group v-model="formPush.deviceType">
                            <el-radio label="直连设备">直连设备</el-radio>
                            <el-radio label="网关子设备">网关子设备</el-radio>
                            <el-radio label="网关设备">网关设备</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="标签" size="small" prop="">
                        <el-select v-model="formPush.labelIds" multiple  placeholder="请选择标签">
                          <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备编号：" size="small" prop="number">
                        <el-input v-model="formPush.number" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="设备厂家：" size="small" prop="vender">
                        <el-input v-model="formPush.vender" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="设备型号：" size="small" prop="model">
                        <el-input v-model="formPush.model" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商联系人：" size="small" prop="supplierName">
                        <el-input v-model="formPush.supplierName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商联系方式：" size="small" prop="supplierPhone">
                        <el-input v-model="formPush.supplierPhone" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="安装日期：" size="small" prop="installationDate">
                        <el-date-picker v-model="formPush.installationDate" value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="安装位置：" size="small" prop="namehouse">
                        <el-input v-model="formPush.namehouse" auto-complete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开始使用时间：" size="small" prop="startTime">
                        <el-date-picker v-model="formPush.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="报废日期：" size="small" prop="scrapTime">
                        <el-date-picker v-model="formPush.scrapTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="设备负责人：" size="small" prop="principal">
                        <!-- :rules="{required: true, message: '该项不能为空', trigger: 'change'}" -->
                        <el-input v-model="formPush.principal" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述：">
                        <el-input type="textarea" v-model="formPush.description"></el-input>
                    </el-form-item>
                    <el-form-item label="图标：" prop="">
                        <el-upload ref="addupload" :auto-upload="false" class="avatar-uploader" :show-file-list="false"
                            :action="uploadPath" list-type="picture" :on-change="onChange"
                            :on-success="handleAvatarSuccess">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium " @click="closeadd">取 消</el-button>
                <el-button size="medium " @click="addList">提 交</el-button>
            </div>
        </el-dialog>

    </section>

</template>

<script>
    import paging from "../paging"
    import { labelSelect,dictionaryProfile,driverselect, iotproductpage, iotproductadd, iotproductupdate, iotproductdelete, xqSelectList } from "../../url/api"
    export default {
        data() {
            return {
                profilelist: [],
                jsDecoder: {},
                labelList:[],
                route_view: true,
                uploadPath: '/api/v1.0/file/upload/file',
                formSearch: {
                    name: "",
                    current: 1,
                    size: 10
                },
                xqTree: [],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ],
                formData: [],
                total: 0,//数据总数
                addOrUpDialog: false,
                formPush: {
                    photoUrl: ''
                },
                imageUrl: "",
                headers: {
                    Authorization: sessionStorage.getItem('Authorization'),
                    token: sessionStorage.getItem('token')
                },
                addorupdata: 1,
                xqdatavalue: {},
                imgstaic: false,
                imgfileList: [],
                driverselects: [],
            }
        },
        methods: {
            getdriverselect() {
                driverselect().then((res) => {
                    if (res.data.ok) {
                        this.driverselects = res.data.data
                    }
                })
            },
            projectIdchange(data) {
                console.log(data);
                this.formPush.projectId = data.id;
                this.formPush.projectName = data.name;
            },
            shanchu(id) {
                let ids = []
                ids.push(id)
                let params = {}
                params.ids = ids
                console.log(params);
                this.$confirm("确定执行删除操作吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // debugger
                    if (this.addorupdata == 1) {
                        iotproductdelete(params).then((res) => {
                            console.log("删除", res)
                            if (res.data.ok) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.getlist();
                            } else {
                                this.$message(res.data.message)
                            }
                        })
                    }

                })
            },
            xiugai(data) {
                this.xqdatavalue = {
                    id: data.projectId * 1,
                    name: data.projectName
                }
                this.formPush = {
                    id: data.id,
                    classifiedName: data.classifiedName,
                    name: data.name,
                    projectId: data.projectId * 1,
                    projectName: data.projectName,
                    messageProtocol: data.messageProtocol,
                    transportProtocol: data.transportProtocol,
                    deviceType: data.deviceType,
                    description: data.description,
                    photoUrl: data.photoUrl,
                    supplierName: data.supplierName,
                    supplierPhone: data.supplierPhone,
                    installationDate: data.installationDate,
                    installationSite: data.installationSite,
                    startTime: data.startTime,
                    scrapTime: data.scrapTime,
                    principal: data.principal,
                    number: data.number,
                    vender: data.vender,
                    model: data.model,
                    profileIds: data.profileIds,
                    driverId:data.driverId,
                    labelIds:data.labelIds,
                };
                this.imageUrl = data.photoUrl
                // debugger
                // this.formPush.orgId = data.orgId * 1
                this.addOrUpDialog = true
                this.addorupdata = 2
            },
            onChange(file, fileList) {
                console.log(file, fileList, "aaaaaaaaaaa");
                this.imgfileList = fileList;
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            gotoadd() {
                if (this.addorupdata == 1) {
                    iotproductadd(this.formPush).then((res) => {
                        console.log("新增", res)
                        if (res.data.ok) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.getlist()
                            this.closeadd()
                            // this.addorupdata == 1
                        } else {
                            this.$message(res.data.message)
                        }
                        // this.closeadd()
                    })
                } else if (this.addorupdata == 2) {
                    // this.formPush.id = this.rowid
                    // debugger
                    iotproductupdate(this.formPush).then((res) => {

                        if (res.data.ok) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.getlist()
                            // this.addorupdata == 1
                        } else {
                            this.$message('修改失败')
                        }
                        this.closeadd()
                    })
                }
            },
            handleAvatarSuccess(resp, file, fileList) {
                debugger
                if (resp.ok) {
                    this.imgfileList = fileList
                    // console.log(resp.data[0], "QQQQQQQQQQ");
                    this.formPush.photoUrl = resp.data[0];
                    this.imageUrl = resp.data[0];
                    this.gotoadd()
                }

            },
            closeadd() {
                this.formPush = {
                    photoUrl: ''
                },
                this.xqdatavalue = {}
                this.imgfileList = []
                this.imageUrl = ''
                this.$refs.formPush.resetFields();
                this.addorupdata = 1
                this.addOrUpDialog = false;
                // this.disabled = false;
                // this.productvalue ={};
                // console.log("aaaaaa",this.productvalue);
            },
            addList() {
                this.$refs.formPush.validate((valid) => {
                    if (valid) {
                        // debugger
                        // delete this.formPush.projectId
                        this.$confirm("确定执行此操作吗？", '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            console.log(this.imgfileList.length, this.imageUrl, this.formPush.photoUrl);
                            if (this.imgfileList.length == 0 && this.imageUrl == this.formPush.photoUrl) {
                                this.gotoadd();
                            } else {
                                // this.formPush.picture = ''
                                // this.pictrueNum = 0
                                this.$refs.addupload.submit();
                            }
                            // delete this.formPush.cpname
                            // this.adddialog = false
                            // debugger
                            console.log(this.formPush)

                            //     debugger
                            //    if(this.imgstaic){
                            //        this.gotoadd()
                            //    }
                            this.adddialog = false

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            openDialog() {
                this.addOrUpDialog = true
                this.addorupdata = 1
            },
            handleCurrentPage(val) {//页码改变
                this.formSearch.current = val
                this.getlist()
            },
            godetails(data) {
                this.$router.push({
                    path: '/product_details',
                    // query: {
                    //     row: data
                    // }
                })
                console.log(this.$router, "路由！");
                sessionStorage.setItem('productData', JSON.stringify(data))

            },
            getlist() {
                iotproductpage(this.formSearch).then((res) => {
                    //console.log(res)
                    if (res.data.ok == true) {
                        this.formData = res.data.data.records.filter((item) => {
                            // if (item.gmtCreate) {
                            //     item.gmtCreate = this.$root.getDateArray(item.gmtCreate)[9]
                            // }
                            return item
                        })
                        this.total = res.data.data.total * 1
                    } else {
                        this.$message(res.data.message);
                    }
                })
                xqSelectList({}).then((res) => {
                    //项目选择列表
                    console.log(res);
                    if (res.data.ok) {
                        this.xqTree = res.data.data;
                        // this.formSearch.projectId = this.xqTree[0].id;
                        // this.getlist();
                    }
                });
            },
            getdictionaryProfile() {
                dictionaryProfile().then(res => {
                    console.log(res);
                    this.profilelist = res.data.data;
                    console.log(this.profilelist);
                })
            }
            // realplay() {
            //     var curUrl = 'wss://172.16.1.1:559/SMSEurl/EQFgALhQ1iCaIXirSJQSj%2BTk8acpr7qxgqo%2BuxHoqnSYkPXNhyDAMBYkCpHF2D7vRmXdiGLNlKeapfTzJG0uLI%2FBHvw72y6Cme9E74frqXossrbdj69qYlQSj2mvkC3ovgKxsbyWRcC30fvD2DbAkDm3AZox%2B9N8KNQG1TlNPhyv1K%2FvMoNEi33R4hZqS8VUXTGYRoFWRtONtohciIjyrBaVwO%2FkF1PBk1LrrquqSq4NLf%2Bf92mP3DQwjSd5jCviMmiJbN%2Boi%2B97ttdg48ALnFtNtCuxFpiWgsxT19PMlhjsoq7vTKOsYGR%2BK4xFpFge60PixXnwB4c7Z7g00jkTmjpSEmyXuh5t44AtLEhiqXEp3FFDjKDdRxzEUHgDi1UXgzkrCsVDhBVlwmknDz8sBveB9DtV41geIc85vKDN2XI2WBJfhUtmhia7L9cnk37T8am5L1BiPBYpg8%2FqOwY1RBOI2ab6yk4vMfIsttflvd4h0TS%2BI7snGV3NAQgIXqyp8t9TbQ%3D%3D'; //预览URL
            //     var streamSecrtKey = ''; //码流密钥
            //     // var curUrl = document.getElementById('previewUrl').value; //预览URL
            //     // var streamSecrtKey =
            //     //     document.getElementById('streamSecrtKey').value; //码流密钥
            //     var url = '',
            //         playUrl = '';
            //     if (!curUrl) {
            //         alert('Please input previewUrl.');
            //         return;
            //     }

            //     var tempArr = curUrl.split('/');
            //     if (tempArr.length > 4) {
            //         url = 'ws://' + tempArr[2] + '/' + '001';
            //         playUrl = tempArr[3] + '/' + tempArr[4];
            //     } else {
            //         this.$message.error('预览Url格式不正确');
            //         return;
            //     }
            //     //设置码流秘钥
            //     if ('' != streamSecrtKey) {
            //         this.jsDecoder.JS_SetSecretKey(this.iWind, streamSecrtKey);
            //     }
            //     this.jsDecoder
            //         .JS_Play(
            //             url,
            //             {
            //                 playURL: playUrl, //通道预览URL, 流媒体
            //                 auth: '', //认证信息, 设备用户名&密码
            //                 token: '', //token
            //             },
            //             this.iWind
            //         )
            //         .then(
            //             function () {
            //                 // this.$message.error('realplay success');
            //                 console.log("success");
            //             },
            //             function () {
            //                 // this.$message.error('realplay failed');
            //                 console.log("failed");
            //             }
            //         );
            // },
        },
        mounted() {
            this.getlist();
            labelSelect({}).then((res) => {
                    console.log(res);
                    if (res.data.ok) {
                        this.labelList = res.data.data;
                    }
                });
            if (this.$route.path == "/product") {
                this.route_view = true
            } else {
                this.route_view = false
            }
            console.log(this.$route);
            this.getdriverselect();
            this.getdictionaryProfile();
            //初始化插件
            // var jsDecoder = new JSPlugin({
            //     szId: "playWind",
            //     iType: 1,
            //     iWidth: 600,
            //     iHeight: 400,
            //     iMaxSplit: 1,
            //     iCurrentSplit: 1,
            //     szBasePath: "static/js",
            //     oStyle: {
            //         border: "#343434",
            //         borderSelect: "red",
            //         background: "#4C4B4B"
            //     }
            // });
            // this.jsDecoder = jsDecoder;
        },
        components: {
            paging
        }
    }
</script>

<style scoped>
    .abc /deep/ .el-dialog {
        width: 600px !important;
    }
    .popover{
        width: 50px;
        height: 50px;
        overflow: hidden;
    }
    .popoverimg {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .elpopover {
        width: 400px;
    }

    .content {
        margin-top: 10px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 480px;
    }

    .card_table {
        width: 1760px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* justify-content: space-between; */
    }

    .card_box {
        width: 338px;
        height: auto;
        /* background-color: #ffffff; */
        margin-top: 10px;
        margin-right: 10px;
    }

    .title {
        margin-left: 20px;
    }

    .product_name {
        font-size: 16px;
        height: 30px;
    }

    .product_id {
        font-size: 14px;
        color: #007674;
    }

    .message {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        font-size: 14px;
        color: #007674;
    }

    .message {
        text-align: center;
    }

    .pr_num {
        color: rgb(99, 126, 247);
        font-weight: 600;
        margin-top: 10px;
        line-height: 20px;
    }

    .pr_state,
    .pr_type {
        margin-top: 10px;
    }

    .point_green {
        display: inline-block;
        width: 6px;
        border-radius: 50%;
        background: green;
        height: 6px;
        position: relative;
        top: -2px;
    }

    .point_red {
        display: inline-block;
        width: 6px;
        border-radius: 50%;
        background: red;
        height: 6px;
        position: relative;
        top: -2px;
    }

    .card_table>>>.el-card__body {
        padding: 0px;
    }

    .top_content {
        padding: 20px 20px 10px 20px;
    }

    .button_icon {
        width: 83.75px;
        height: 30px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;

        color: rgb(130, 132, 133);
    }

    .button_icon>i {
        cursor: pointer;

    }

    .button_icon>i:hover {
        color: rgb(53, 104, 247);
    }

    .button_box {
        height: 40px;
        width: 100%;
        background: #EEEEEE;
        display: flex;
        margin-top: 20px;
    }

    .line {
        height: 20px;
        width: 1px;
        margin-top: 10px;
        background-color: #32c5c3;
    }
</style>